<template>
    <nav>
        <ul class="pagination pull-right">
            <li @click="jump(page.currentPage-1)" :class="{disabled:page.currentPage===1}">
                <a href="javascript:;">
                    <span>&laquo;</span>
                </a>
            </li>
            <li @click="jump(1)" :class="{active:page.currentPage===1}">
                <a href="javascript:;">1</a>
            </li>
            <li v-if="totals>MIN_PAGE_TOTAL&&page.currentPage>=SHOW_ELS_NUM">
                <a href="javascript:;">...</a>
            </li>
            <li :key="ePage" v-for="ePage in middlePages" :class="{active:ePage===page.currentPage}" @click="jump(ePage)">
                <a href="javascript:;">{{ePage}}</a>
            </li>
            <li v-if="totals>MIN_PAGE_TOTAL&&page.currentPage<totals-3">
                <a href="javascript:;">...</a>
            </li>
            <li v-if="totals>1" @click="jump(totals)" :class="{active:page.currentPage===totals}">
                <a href="javascript:;">{{totals}}</a>
            </li>
            <li @click="jump(page.currentPage+1)" :class="{disabled:page.currentPage===totals}">
                <a href="javascript:;" aria-label="Next">
                    <span>&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
    props: ['page'],
    data() {
        return {
            MIN_PAGE_TOTAL: 8,
            SHOW_ELS_NUM: 5
        }
    },
    methods: {
        jump(currentPage) {
            if (currentPage === 0 || currentPage === this.totals + 1) {
                return
            }
            this.$emit('jump', currentPage)
        }
    },
    computed: {
        totals() {
            return Math.ceil(this.page.totalPage / this.page.pageSize)
        },
        middlePages() {
            let start, end, middleArr = []
            if (this.totals <= this.MIN_PAGE_TOTAL) {
                start = 2
                end = this.totals - 1
            } else {
                start = this.page.currentPage - 2
                end = this.page.currentPage + 2
                start = start < 2 ? 2 : start
                start = start > this.totals - this.SHOW_ELS_NUM + 1 ? this.totals - this.SHOW_ELS_NUM + 1 : start
                end = end < this.SHOW_ELS_NUM ? this.SHOW_ELS_NUM : end
                end = end >= this.totals ? this.totals - 1 : end
            }

            for (let i = start; i <= end; i++) {
                middleArr.push(i)
            }
            return middleArr
        }
    }
}
</script>

<style>

</style>
